<template>
	<app-layout>
		<app-tab-nav :tabList="tabList" :activeItem="activeTab" @click="tabStatus" :theme="getTheme"></app-tab-nav>
		<view class="card-list">
			<view @click="toDetail(item)" v-for="item in list" :key="item.id">
				<view class="card-item dir-top-nowrap main-center">
					<!-- <image class="card-img" :src="item.pic_url"></image> -->
					<view class="name">{{item.coupon.name}}{{item.coupon.sub_price}}元抵用券</view>
					<view class=''>
						领取时间:{{item.created_at}}
					</view>
					<view class=''>
						有效期:自领取日起{{item.coupon.expire_day}}天有效
					</view>
					<!-- <view class="right-box dir-top-nowrap main-center cross-center">
						<span>查看抵用券详情</span>
					</view> -->
				</view>
			</view>
		</view>
		<view class="no-list" v-if="list.length === 0">
			<app-no-goods background="#f7f7f7" :title="title"></app-no-goods>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appTabNav from "../../../components/basic-component/app-tab-nav/app-tab-nav.vue";
	import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';

	export default {
		data() {
			return {
				tabList: [{
						id: 3,
						name: '未使用'
					},
					{
						id: 1,
						name: '已使用'
					},
					{
						id: 2,
						name: '已过期'
					}
				],
				show: false,
				img: '/images/share/img-share-order.png',
				activeTab: 3,
				list: [],
				more: false,
				page: 2,
				title: '暂无未使用抵用券~'
			}
		},
		components: {
			'app-tab-nav': appTabNav,
			'app-no-goods': appNoGoods,
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			})
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.getMore();
		},
		methods: {
			saveImg() {
				let that = this;
				// #ifndef MP-ALIPAY
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success(res) {
						if (res.errMsg == "authorize:ok") {
							uni.downloadFile({
								url: that.img,
								success(res) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success() {
											uni.showToast({
												title: '保存成功',
												icon: 'success',
												duration: 1000
											})
										},
										fail() {
											uni.showToast({
												title: '保存失败',
												icon: 'none',
												duration: 1000
											})
										}
									})
								}
							})
						}
					},
					fail(res) {
						uni.showModal({
							title: '提示',
							content: '保存失败，需要授权保存到相册权限',
							showCancel: false,
							confirmText: '打开授权',
							success(e) {
								if (e.confirm) {
									uni.openSetting({});
								}
							}
						});
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				my.showLoading({
					content: '图片保存中'
				});
				my.saveImage({
					url: that.img,
					showActionSheet: true,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 1000
						})
					},
					fail() {
						uni.showToast({
							title: '保存失败',
							icon: 'none',
							duration: 1000
						})
					},
					complete() {
						my.hideLoading();
					}
				});
				// #endif
			},

			showModal(id) {
				let that = this;
				if (id > 0) {
					uni.showLoading({
						text: '生成中...'
					});
					that.$request({
						url: that.$api.card.qrcode,
						data: {
							cardId: id,
						},
						method: 'get'
					}).then(response => {
						uni.hideLoading();
						if (response.code === 0) {
							that.show = true;
							that.img = response.data.file_path;
						} else {
							uni.showToast({
								title: response.msg,
								icon: 'none',
								duration: 1000,
							});
						}
					}).catch(response => {
						uni.hideLoading();
						uni.showToast({
							title: response,
							icon: 'none',
							duration: 1000,
						});
					});
				}
			},

			tabStatus(e) {
				this.list = [];
				let id = e.currentTarget.dataset.id;
				if (id === 3) {
					this.title = `暂无未使用抵用券~`;
				} else if (id === 1) {
					this.title = `暂无已使用抵用券~`;
				} else if (id === 2) {
					this.title = `暂无已过期抵用券~`;
				}
				this.page = 2;
				this.activeTab = id;
				this.getList();
			},
			getList() {
				let that = this;
				that.$showLoading({
					text: '加载中...'
				});
				// console.log(that.userInfo);
				that.$request({
					url: that.$api.voucher.list,
					data: {
						// page: that.page,
						user_id: that.userInfo.options.user_id,
						status: that.activeTab
					},
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.list = response.data.list;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.getList();
					});
				});
			},
			getMore() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
				});
				that.$request({
					url: that.$api.voucher.list,
					data: {
						page: that.page,
						user_id: that.userInfo.options.user_id,
						status: that.activeTab
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						if (response.data.list.length > 0) {
							that.loading = null;
							that.list = that.list.concat(response.data.list);
							that.page++;
						}
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000,
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/consumer/coupondetail/coupondetail?id=${item.coupon_id}`
				});
			},
		},
	}
</script>

<style scoped lang="scss">
	.no-list {
		margin-top: #{150upx};
	}

	.card-list {
		width: 100%;
		padding-top: #{10rpx};
		background-color: #f7f7f7;
	}

	.card-item {
		// height: #{180rpx};
		margin: #{20rpx};
		padding: 24rpx 36rpx;
		// background-color: #fff;
		background-color: #cf7e4f;
		color: #FFFFFF;
		// color: #353535;
		font-size: 24rpx;
		border-radius: 16#{rpx};
		line-height: 52rpx;

		.name {
			font-size: 32rpx;
			padding-bottom: 16rpx;
			border-bottom: ridge #ee915b;

			.is_send {
				width: #{80rpx};
				height: #{40rpx};
				color: #ff4544;
				font-size: #{20rpx};
				background-color: #ffecec;
				text-align: center;
				line-height: #{40rpx};
				margin: #{16rpx 0 20rpx 0};
			}
		}

		.card-img {
			height: #{88rpx};
			width: #{88rpx};
			border-radius: 50%;
			margin-left:24#{rpx};
		}

		.right-box {
			margin: #{65rpx} #{35rpx};

			.card-qr {
				height: #{50rpx};
				width: #{50rpx};
			}

			span {
				font-size:20#{rpx};
				color: #353535;
				margin-top:10#{rpx};
			}
		}
	}

	.qr-modal {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 100%;
		z-index: 2;
	}

	.look-qr {
		position: absolute;
		background-color: #fff;
		width: #{550rpx};
		height: #{700rpx};
		left: 50%;
		margin-left: #{-275rpx};
		top: 20%;
		border-radius: #{10rpx};
		text-align: center;
		padding: #{50rpx};
		font-size: #{34rpx};
		color: #353535;
	}

	.look-qr image {
		margin-top: #{25rpx};
		height: #{450rpx};
		width: #{450rpx};
	}

	.look-qr button {
		margin: #{15rpx} auto 0;
		height: #{60rpx};
		line-height: #{60rpx};
		color: #fff;
		font-size: #{28rpx};
		width: #{200rpx};
		background-color: #ff4544;
	}
</style>
